<template>
  <div>
    <transition name="alert">
      <div v-if="show" class="text" :style="{left: left + 'px'}">{{text}}</div>
    </transition>
  </div>
</template>
<script>
  export default {
    name: 'ErrorAlert',
    data() {
      return {
        left: (window.innerWidth - 150) / 2
      }
    },
    props: {
      show:{
        type: Boolean,
        default(){
          return false
        }
      },
      text:{
        type: String,
        default(){
          return '系统异常'
        }
      }
    }
  }
</script>
<style scoped>
  .alert-enter-active {
    transition: all .3s ease;
  }
  .alert-leave-active {
    transition: all .3s ease;
  }
  .alert-leave, .alert-enter-to {
    bottom: 50px !important;
    opacity: 1;
  }
  .alert-enter, .alert-leave-to {
    bottom: -30px !important;
    opacity: 0;
  }
  .text{
    position: absolute;
    bottom: 50px;
    width: 3.93rem;
    height: 1.07rem;
    background-color: #fff;
    color: #006569;
    border-radius: 15px;
    text-align: center;
    font-size: 0.5rem;
    line-height:1.07rem;
  }
</style>
